<template>
  <div class="wrapper" @tap="toDetail">
    <div class="ccontent">
      <div class="c-left">
        <img class="title" :src="item.big_img" alt="" />
      </div>
      <div class="c-right">
        <p class="f-title">{{item.title}}</p>
        <div class="min-title">
          <img class="min" :src="item.min_img" alt="" /> <p>{{item.author}}</p>
        </div>
        <div class="min-content">
          <div class="m-c-d">
            {{item.dec}}
          </div>
        </div>

      </div>
  </div>



  </div>
</template>
<script>
  export default {
    props:[
      'item',
      'index'
    ],
    methods:{
      toDetail(){
        //跳转页面 +传参
        wx.navigateTo({
          url:'/pages/todetail/main?index='+this.index
        })
      }
    }
  }
</script>

<style>
  .m-c-d{
    height:182rpx;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
    overflow:hidden;
    width:80%;
    text-align:center;
    margin:0 auto;
    margin-top:20rpx;
    margin-bottom:20rpx;

  }
  .min-content{

    margin:0 auto;
    text-align: left;
    font-size: 28rpx;
    margin-top:15rpx;
    border:1rpx solid red;
    margin-left:20rpx;
    border-radius:14rpx;
    margin-bottom:19rpx;

  }
  .min-title{
    display:flex;
    width:97%;
    margin:0 auto;
    text-align:center;

  }
  .min-title>p{
    font-size: 22rpx;
    line-height: 74rpx;
  }
  .wrapper{
    border:1rpx solid red;
    border-radius:15rpx;
    border-bottom:none
  }
  .ccontent{
    height: 95%;
    width: 95%;
    margin:0 auto;
    margin-top :15rpx;
    display: flex;
    justify-content: center;

  }
  .title{
    height: 300rpx;
    width: 300rpx;
    border-radius: 15rpx;

  }
  .min{
    height: 80rpx;
    width: 80rpx;
    border-radius:15rpx;
  }
  .f-title{
    font-size: 31rpx;
    text-align: center;
    height: 51rpx;
  }
</style>
